<template>
    <div class="cell">
        <div class="space"></div>
        <popup :pupData="pupData" @sureFun="sureFun" @cancelFun="cancelFun" ref="popupref"></popup>
        <div :class="[bacState?bacRed:bacBlue,bacNor]">
            <p><span>{{item.money}}</span>积分</p>
            <div class="item_t_m">
                <p class="p1">丝羡{{item.money}}元代金券</p>
                <!--<p class="p2">满任意金额可用</p>-->
            </div>
        </div>
        <div class="item_b">
            <p class="p2">兑换时间：{{item.time}}</p>
            <p class="p3" @click="toIntegralMall">使用</p>
            <p class="p3" @click="toReturn(item)">退货</p>
        </div>
        <div class="cir_l"></div>
        <div class="cir_r"></div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        // 代金券列表组件
        name: `copup-item`,
        props: {
            item: {
                type: Object
            },
            index: {
                type: Number
            }
        },
        data() {
            return {
                pupData: {
                    des: '您确定退货吗？',
                    cancel: '取消',
                    sure: '确定'
                },
                itemData: {},
                bacState: true,
                bacNor: 'item_t',
                bacBlue: 'bac_blue',
                bacRed: 'bac_red'
            };
        },
        created() {
            if (this.index % 2 === 0) {
                this.bacState = true;
            } else {
                this.bacState = false;
            }
        },
        methods: {
            toIntegralMall() {
                // 去积分商城
                this.$router.push('/integralMall');
            },
            sureFun() {
                // 调用退货方法
                this.$router.push({name: 'couponstate', query: {money: this.itemData.money}});
                // 确定方法
                this.$refs.popupref.switchState();
            },
            cancelFun() {
                // 取消方法
                this.$refs.popupref.switchState();
            },
            toReturn(item) {
                // 调出弹窗
                this.$refs.popupref.switchState();
                this.itemData = item;
            }

        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "../../assets/stylus/main.styl"
    .bac_blue {
        coupon2()
    }

    .bac_red {
        coupon1()
    }
    .cir_l {
        position: absolute;
        bottom: 8vw;
        width: 4vw;
        height: 4vw;
        border-radius: 50%;
        background: #f5f5f5;
        left: -2vw;
    }

    .cir_r {
        position: absolute;
        bottom: 8vw;
        width: 4vw;
        height: 4vw;
        border-radius: 50%;
        background: #f5f5f5;
        right: -2vw;
    }

    .cell {
        background: #f5f5f5;
        width: 94vw;
        border-radius: 3vw;
        overflow: hidden;
    }

    .item {
        height: vw(113px);
        background: #fff;
        width: 94vw;
        flex-y(, stretch);
        box-sizing border-box;
        margin: 3vw 3vw 0 3vw;
        position: relative
    }

    .item_t {
        flex-x();
        flex: 1;
        padding: 0 3vw;
        height 17vw;
        & > p {
            flex: 1;
            text-align: center;
            flex-x();
            align-items: center;
            justify-content: center;
            word(14px, #fff);
            & span {
                word(40px, #fff);
            }
        }
        & .item_t_m {
            flex: 2;
            & .p1 {
                word(16px, #fff);
                line-height: 1.5;
                text-align right
            }
            & .p2 {
                word(10px, #999);
            }
        }
        & .item_t_r {
            word(10px, main-color);
            border(main-color, 1px);
            border-radius: 20px;
            padding: 1vw 3vw
        }

    }

    .item_b {
        flex-x();
        padding: 0 6vw;
        height: 10vw;
        background #fff
        border(1px, #f5f5f5)
        & .p2 {
            word(12px, #666);
        }
        & .p3 {
            word(12px, #F07382);
        }
    }

    .space {
        space()
    }
</style>
